<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title>练习4：QQ彩贝热销时装</title>
		<style>
			.box,.box1,.box2,body,ul,li,a,
			{	border: 1px solid red;
				margin: 0px;
				padding: 0px;
			}
			li{
				list-style: none;
			}
			.clearfix:after{
				display: table;
				content:"";
				clear: both;
			}
			.fl{
				float: left;
			}
			h2{
				font-size: 18px;
				font-weight: 400;
			}
			li{
				margin-top: 20px;
			}
			
			.box{   
				width: 990px;
				height: 400px;
				margin: 0px auto;
				box-sizing: border-box;
			}
			.box1{border: 1px solid #ccc;
				width: 330px;
				height: 400px;
				padding-top: 50px;
				box-sizing: border-box;
				position: relative;
			}
			.box2{
				width: 660px;
				height: 400px;
				box-sizing: border-box;
				
			}
			.box1 a{
				position: absolute;
				top: 220px;
				left: 110px;
				
			}
			.rtxt{border: 1px solid #ccc;
				width: 330px;
				height: 200px;
				border-left: none;
				box-sizing: border-box;
				position: relative;
			}
			.rtxt a{
				position: absolute;
				top: 80px;
				left: 210px;
			}
			.rtxt a:hover{
				transform: translate(12px);
				transition: 1s;
			}
			.box1 a:hover{
				transform: translate(12px);
				transition: 1s;
			}
		</style>
	</head>

	<body>
		<div class="box clearfix">
			<div class="box1 fl">
				<ul>
					<h2>超级信用卡</h2>
					<li>线上线下课累计彩贝积分</li>
					<a href="练习5：QQ彩贝导航.html"><img src="image/1.bmp" /></a>
				</ul>
			</div>
			<div class="box2 fl clearfix">
				<div class="rtxt fl">
					<ul>
						<h2>彩贝抢霸</h2>
						<li>每天10点更新</li>
						<a href="练习5：QQ彩贝导航.html"><img src="image/2.bmp" /></a>
					</ul>
				</div>
				<div class="rtxt fl">
					<ul>
						<h2>热门优惠劵</h2>
						<li>全场免费领取</li>
						<a href="练习5：QQ彩贝导航.html"><img src="image/3.bmp" /></a>
					</ul>
				</div>
				<div class="rtxt fl">
					<ul>
						<h2>促销活动</h2>
						<li>汇集全网优惠</li>
						<a href="练习5：QQ彩贝导航.html"><img src="image/4.bmp" /></a>
					</ul>
				</div>
				<div class="rtxt fl">
					<ul>
						<h2>精挑细选</h2>
						<li>给你最好的选择</li>
						<a href="练习5：QQ彩贝导航.html"><img src="image/5.bmp" /></a>
					</ul>
				</div>
			</div>
		</div>
	</body>
</html>